<template>
  <div class="list xui-margin-right-xs xui-margin-bottom-sm">
    <router-link :to="href">
      <img-box
          :width="224"
          :height="204"
          :imgSrc="item.coverUrl   || item.imgUrl"
        >
        </img-box>
        <div class="list__info">
          <span class="xui-text-truncate xui-padding-horizontal-md">{{item.title}}</span>
        </div>
    </router-link>
  </div>
</template>
<script>
import ImgBox from "@/components/widge/img-box";
export default {
  components: {
    "img-box": ImgBox
  },
  props: {
    item: Object,
    href: String
  }
};
</script>
<style lang="less" scoped>
.list {
  width: 224px;
  height: 204px;
  float: left;
}
.list a {
  display: block;
  position: relative;
  cursor: pointer;
}
.list a:hover .list__info {
  background-color: rgba(42, 42, 43, 1);
}
.list .list__info {
  width: 100%;
  height: 48px;
  background-color: rgba(42, 42, 43, 0.5);
  position: absolute;
  bottom: 0;
}
.list .list__info span {
  display: block;
  line-height: 48px;
  height: 48px;
  font-size: 14px;
  text-align: center;
  color: #fff;
}
</style>

